<template>
  <div class="bc" v-bind:style="{'height':clientHeight + 'px'}">
    <selectHead @showDev="showDev" @changeChild="changeChild" closed="true"></selectHead>
    <selectDev :devList="devList" :isShow="isShow" @changeShow="changeShow"></selectDev>
    <router-link to="/home">
      <div class="input-button blue">返回个人中心</div>
    </router-link>
  </div>
</template>

<script>
import selectHead from '../../components/common/select'
import selectDev from '../../components/common/selectDev'
import {VXDEVLIST} from '../../api/request'
import {Toast} from 'vue-ydui/dist/lib.rem/dialog'
export default {
  name: 'devList',
  data () {
    return {
      clientHeight: document.documentElement.clientHeight,
      devList: [],
      isShow: false
    }
  },
  components: {selectHead, selectDev},
  methods: {
    changeChild: function () {
      this.isShow = false
    },
    showDev: function (code) {
      VXDEVLIST(this.$store.state.user.userId, code).then(
        res => {
          if (res.data.code === 200) {
            this.devList = res.data.data
            this.isShow = true
          } else {
            Toast(res.data.msg)
          }
        }
      )
    },
    changeShow: function (devId) {
      this.isShow = !this.isShow
      if (devId === 'unChange') {
        return
      }
      this.$router.push({path: '/productHome', query: {devId: devId}})
    }
  }
}
</script>

<style scoped>
  .bc {
    background-color: #ebebeb;
    padding-top: 0.2rem;
  }

  .blue {
    margin-top: 1.6rem;
    border-radius: 0.1rem;
    background-color: #0092f8;
  }

</style>
